<template>
  <div class="c-bg-sgray c-pt80">
    <div class="c-fs30 c-fc-xblack c-fw500 c-textAlign-c">您即将查看店铺详细信息</div>
    <div class="c-fs24 c-fc-gray c-textAlign-c c-ph80 c-mt30">为了保证双方信息安全，请先按照提示完成安全验证</div>
    <div class="c-ph40">
      <div @click="showSlideVerify = true" class="c-w100 c-hh64 c-flex-row c-flex-center c-fs26 c-fc-white theme-bg c-br32 c-mt100">去验证</div>
    </div>
    <picture-verify @onSuccess="onSuccess" :showSlideVerify.sync="showSlideVerify"></picture-verify>
  </div>
</template>

<script>
import PictureVerify from "@/components/templates/pictureVerify.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ImgVerify',
  components: {
    PictureVerify
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      showSlideVerify: false,
      // slideObj: {
      //   l: 42, //滑动碎片的大小
      //   r: 10, //滑动碎片的圆角
      //   w: 310, //画布的宽
      //   h: 155, //画布的高
      // },
      // imgs: [
      //   "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_RXinJm86S2F4m4yepfyS.jpg",
      //   "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_7YF2R5yhAfa2rEAx7c8N.jpg",
      //   "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_8EwJeMMJGSnX2ZKSmaW5.jpg",
      //   "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/9ca90984/admin-fe_lj7l_uploadBox_hGknhGEkEJZRfARyhwiJ.jpg",
      // ],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    setDocumentTitle("店铺信息");// eslint-disable-line
    this.showSlideVerify = false;
    // let clientWidth = document.documentElement.clientWidth; //获取HTML文档所在窗口的当前宽度
    // let ratio = clientWidth / 16; //计算基数为40的比例,然后动态计算画布在当前窗口的宽高，撑开弹窗
    // this.slideObj.l = 1.2 * ratio;
    // this.slideObj.r = 0.3 * ratio;
    // this.slideObj.w = 11.5 * ratio;
    // this.slideObj.h = 5.5 * ratio;
  },
  computed: {

  },
  watch: {

  },
  methods: {
    goVerify() {
      this.$routerGo(this, "replace", {
        path: "/member/myShopInfo/myShopInfo"
      });
    },
    onSuccess() {
      let $this = this;
      this.showSlideVerify = false;
      this.$showCjToast({
        text: "验证成功",
        type: "success",
      }).then(() => {
        $this.goVerify()
      });
    },
    onFail() {
      console.log("失败回调");
    },
    onRefresh() {
      console.log("刷新回调");
    },
  },
  activated() {
  },
  deactivated() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.slide-verify-slider-text {
  font-size: 0.7rem;
}
</style>
